<route type="page" lang="json5">
{
"style": { "navigationStyle": "custom" }
}
</route>

<template>
  <view class="full-page" :style="{ paddingTop: safeArea.top + 'px', paddingBottom: safeArea.bottom + 'px' }">
    <!--商标部分-->
    <view class="logo-desc">
      <!-- 商标图片 横向纵向居中 -->
      <view class="logo">
        <wd-img :width="350" :height="300" :src="logoImg" />
      </view>
    </view>

    <!--  登录表单部分  -->
    <view class="login-form">
      <!--   手机号输入框   -->
      <view class="login-form-input">
        <wd-form ref="loginForm" :model="loginForm">
          <wd-cell-group>
            <wd-input
                label="手机号"
                label-width="100px"
                prop="phonenumber"
                clearable
                v-model="loginForm.phonenumber"
                placeholder="请输入手机号码"
            />
          </wd-cell-group>

          <view class="footer">
            <wd-button custom-class="login-button" type="primary" size="large" @click="handleLogin" block>
              登录
            </wd-button>
          </view>
          <!--  灰色字体小字  -->
          <view style="color: #999999; text-align: center; margin-top: 10px">
            新用户无需注册登录即加入会员，尊享会员权益
          </view>
        </wd-form>
      </view>
    </view>

    <!--  底部小图标  -->
    <view class="bottom-bar">
      <!-- 一行五个图标，每个图标下面带文字 -->
      <view class="grid-bar">
        <!--  图标在上，文字在下  -->
        <view class="img-text">
          <wd-img :width="60" :height="60" :src="rhylImg" />
          <text>入会有礼</text>
        </view>
        <view class="img-text">
          <wd-img :width="60" :height="60" :src="jfdhImg" />
          <text>积分兑换</text>
        </view>
        <view class="img-text">
          <wd-img :width="60" :height="60" :src="sjtqImg" />
          <text>升级特权</text>
        </view>
        <view class="img-text">
          <wd-img :width="60" :height="60" :src="nxbzImg" />
          <text>奶茶宝藏</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { loginApi } from "@/api/loginApi";
import { LoginData } from "@/api/types";
const { router } = getCurrentInstance() as any;
import logoImg from '@/static/images/mk-logo.png';
import rhylImg from '@/static/images/mine/rhyl.png';
import jfdhImg from '@/static/images/mine/jfdh.png';
import sjtqImg from '@/static/images/mine/sjtq.png';
import nxbzImg from '@/static/images/mine/nxbz.png';

// 定义安全区域信息的响应式变量
const safeArea = ref({
  top: 0,
  bottom: 0
})

const loginForm = ref<LoginData>({
  phonenumber: '',
  clientId: '',
  grantType: ''
})

const handleLogin = async () => {
  try {
    const res = await loginApi(loginForm.value);
    if (res) {
      // 震动
      uni.vibrateShort({
        success: function () {
          console.log('登录成功');
        }
      });
      // 获取页面栈
      const pages = getCurrentPages();
      if (pages.length >= 2) {
        // 上一个页面
        const prevPage = pages[pages.length - 2];
        console.log('上一个页面的路径:', prevPage.route);
        // 可以根据需求访问上一个页面的其他属性和方法
      }

      // 获取 redirect 参数
      const redirect = router?.params?.redirect;
      if (redirect) {
       uni.navigateTo({ url: decodeURIComponent(redirect) });
      } else {
        // 如果没有 redirect 参数，跳转到默认页面
        uni.reLaunch({ url: '/pages/index/index' });
      }
    }
  } catch (error) {
    console.error('登录失败', error);
    // 可以在这里添加错误提示逻辑
  }
}

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  // 设置安全区域信息
  safeArea.value = {
    top: systemInfo.safeAreaInsets.top,
    bottom: systemInfo.safeAreaInsets.bottom
  };
})
</script>

<style lang="scss" scoped>
/* 去除默认边距 */
html, body {
  margin: 0;
  padding: 0;
}

/* 设置根元素的背景颜色 */
.full-page {
  background-color: #FBECE5;
  min-height: 100vh;
}

.logo-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;

  .logo {
  }

  .desc {
    color: #999;
    text-align: center;
    line-height: 1.5;
  }
}

.login-form {
  margin-bottom: 30rpx;
}

.login-form-input {
  background-color: #FBECE5;
  padding: 20rpx;
}

.footer {
  margin-top: 40rpx;

  :deep() {
    .login-button {
      background-color: #DC4D6B;
    }
  }
}

.bottom-bar {
  display: flex;
  justify-content: space-around;
  margin-bottom: 90rpx;
  position: fixed;
  bottom: 0;
  width: 100%;

  .img-text {
    font-size: 28rpx;
    color: #999;
  }
}

.grid-bar {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.grid-bar view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>